<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>10_过渡&动画1</title>
    <style>
      /* 显示到隐藏 leave */
      .first-leave {
        opacity: 1;
        transform: translateX(0);
      }
      .first-leave-active {
        transition: opacity 3s, transform 2s;
      }
      .first-leave-to {
        opacity: 0;
        transform: translateX(200px);
      }
      /* 隐藏到显示 enter */
      .first-enter {
        opacity: 0;
      }
      .first-enter-active {
        transition: opacity 3s;
      }
      .first-enter-to {
        opacity: 1;
      }

      /* 显示到隐藏 leave */
      .second-leave {
        opacity: 1;
        transform: translateX(0);
      }
      .second-leave-active {
        transition: opacity 3s, transform 2s;
      }
      .second-leave-to {
        opacity: 0;
        transform: translateX(100px);
      }
    </style>
  </head>
  <body>
    <!--
1. vue动画的理解
  操作css的trasition或animation
  vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
  1). 在目标元素外包裹<transition name="xxx">
  2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
-->
    <div id="root">
      <button @click="isShow = !isShow">按钮</button>
      <transition name="first">
        <p v-show="isShow">显示&隐藏</p>
      </transition>
      <transition name="second">
        <p v-show="isShow">显示&隐藏</p>
      </transition>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#root",
        data: {
          isShow: true,
        },
      });
    </script>
  </body>
</html>
